<!--
 * @Descripttion: 
 * @version: 
 * @Author: WangMingJun
 * @Date: 2021-10-07 12:09:43
 * @LastEditors: WangMingJun
 * @LastEditTime: 2022-10-01 09:52:01
-->
<template>
	<div class="box">
		<div class="searchItem">
			<span class="sort">{{index+1}}</span>
			<span class="text" :title="title">{{title}}</span>
			<span class="like">赞:{{like_count}}</span>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['id', 'title', 'like_count', 'index'],
		data() {
			return {};
		}
	};
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		justify-content: center;
	}
	.searchItem {
		display: flex;
		cursor: pointer;
		width: 100%;
		align-items: center;
		height: 30px;
		font-size: 12px;
		&:hover{
			background-color: #ccc;
		}
		.text {
			width: 80%;
			word-break: keep-all;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.sort {
			display: block;
			padding: 3px;
			margin-right: 10px;
			margin-left: 10px;

			background: red;
			color: #fff;
			border-radius: 3px;
		}
		.like {
			margin-left: 5px;
		}
	}
</style>
